<template>
  <div class="px-4 h-full overflow-auto">
    <div class="flex justify-between items-center">
      <Transition name="swiper">
        <div class="text-title text-xl font-bold" :key="title">{{ title }}</div>
      </Transition>
    </div>
    <div class="mt-4"></div>
    <Transition name="swiper">
      <div :key="currentIndex" v-if="isPlay" class="text-xl font-bold text-[#fbbf24]">
        {{ content[currentIndex] }}
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts" name="MoXiangText">
import { data } from "../utils";
import { ref, toRefs, withDefaults, defineProps, defineExpose } from "vue";
import { getList } from "@/api/word";
import { onMounted } from "vue";
import { computedAsync } from "@vueuse/core";
import * as api from "@/api/word";
import { computed } from "vue";
import { watch } from "vue";
const currentIndex = ref(-1);
const props = withDefaults(defineProps<{ isPlay: boolean; wordId: number }>(), {});
const { isPlay, wordId } = toRefs(props);
const wordData = computedAsync(
  async () => {
    if (wordId.value == null) {
      return void 0;
    }

    const res = await api.detail(wordId.value);

    if (res.data) {
      return res.data;
    }

    return void 0;
  },
  void 0,
  { lazy: true }
);
const title = computed(() => wordData.value?.title || data[0].title);
const content = computed(() => wordData.value?.content.split("\n") || data[0].content);
function next(index?: number) {
  if (index != void 0) {
    currentIndex.value = index;
    return;
  }
  if (currentIndex.value >= content.value.length - 1) {
    currentIndex.value = 0;
    return;
  }
  currentIndex.value++;
}

function resetText() {
  currentIndex.value = currentIndex.value == -1 ? -1 : currentIndex.value - 1;
}

watch(wordId, () => {
  resetText();
});

defineExpose({ next, resetText });
</script>
